<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <ng-container *ngIf="model$ | async as vm">
    <tg-user-avatar
      size="m"
      class="no-border"
      [user]="vm.user"
      [color]="vm.user.color"
      type="light"
      [rounded]="true"
      aria-hidden="true"></tg-user-avatar>

    <button
      *ngIf="!vm.open"
      data-test="open-comment-input"
      tgRestoreFocusTarget="open-comment-input"
      (click)="open()"
      type="button"
      class="open-comment-input">
      {{ t('comments.leave_comment') }}
    </button>

    <div
      (resized)="resizeEditor$.next()"
      class="editor"
      *ngIf="vm.open">
      <tg-editor
        id="comment"
        class="no-shadow"
        tgRestoreFocus="open-comment-input"
        field=""
        [toolbar]="toolbar"
        [placeholder]="t('comments.leave_comment')"
        [extraContentCss]="['/assets/editor/comment.css']"
        (contentChange)="onCommentContentChange($event)"
        (editorReady)="onInitEditor()"></tg-editor>

      <div
        class="field-actions"
        *ngIf="vm.editorReady">
        <button
          (click)="cancel()"
          data-test="comment-cancel"
          tuiButton
          type="button"
          appearance="tertiary">
          {{ t('commons.cancel') }}
        </button>
        <button
          (click)="save()"
          data-test="comment-save"
          tuiButton
          type="submit"
          appearance="primary">
          {{ t('comments.comment_action') }}
        </button>
      </div>
    </div>

    <tg-discard-changes-modal
      [open]="vm.showConfirmationModal"
      (discard)="discard$.next(true)"
      (cancel)="discard$.next(false)"></tg-discard-changes-modal>
  </ng-container>
</ng-container>
